<template>
  <view>
    <view v-if="imgShow" class="goods-item__img" style="border-radius: 20rpx 20rpx 0 0">
      <!-- #ifndef H5 -->
      <image :src="cropImg(item.pic, 380, 380)" alt :lazy-load="true" mode="aspectFill" style="height: 100%"></image>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <lazy-load>
        <img :src="cropImg(item.pic, 380, 380)" mode="aspectFill" style="height: 100%" />
      </lazy-load>
      <!-- #endif -->
    </view>
    <good-item-foot :form-data="formData" :goods-info="item" />
  </view>
</template>

<script setup lang="ts">
import { cropImg } from '@/utils'
import type { PropType } from 'vue'
import type { GoodFormData } from '../types'
import goodItemFoot from './good-template/good-item-foot.vue'
import { GoodItemType } from './good'

const $emit = defineEmits(['navToDetail'])

defineProps({
  formData: {
    type: Object as PropType<GoodFormData>,
    default() {
      return {}
    },
  },
  classBugCard3: {
    type: String,
    default: '',
  },
  item: {
    type: Object as PropType<GoodItemType>,
    default: () => ({}),
  },
  goodsNameClass: {
    type: String,
    default: '',
  },
  goodsCornerMark: {
    type: Object as PropType<Record<'url' | 'class', string>>,
    default: () => ({}),
  },
  imgShow: {
    type: Boolean,
    default: true,
  },
})
</script>

<style lang="scss" scoped>
.goods-item {
  width: 348rpx;
  border-radius: 16rpx;
  margin-top: 20rpx;
  overflow: hidden;
  &__image {
    height: 330rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  &:nth-child(-n + 2) {
    margin-top: 0;
  }
  &__foot {
    padding: 12rpx 12rpx 20rpx;
  }
}
</style>
